<template>
	<view class="app-leaks">
		<scroll-view scroll-y="true" class="scroll-view-box" @scrolltolower="getData" lower-threshold="60">
			<view class="e-p-20">
				<view class="app-leaks__item bg-white e-radius-20 e-m-b-20 e-p-20" v-for="(item,index) in list" :key="item.id" @tap="handleShow(item)">
					<view class="e-flex e-font-28 c-333 e-m-b-14">
						<view class="e-flex-1">
							商品编号{{item.productCode}}
						</view>
						<view class="">
							{{item.strategyName}} {{item.money || 0}}
						</view>
					</view>
					<view class="e-font-24" style="color: #B3B3B3;">
						{{item.swAccount}}
					</view>
					<view class="e-flex">
						<view class="e-flex-1 c-red">
							<text v-if="item.status === 1">未领取</text>
							<text v-else-if="item.status === 2">已领取</text>
						</view>
						
						<view class="e-font-30" v-if="item.status === 1" :style="{color:AppSkin.primary}">
							领取
						</view>
					</view>
				</view>
				<empty :text="$t('user.暂无记录')"  :icon="$staticPath('default_img.png')" show  v-if="list.length === 0"></empty>
				<load-more v-else :showLoad="showLoad"></load-more>
			</view>
		</scroll-view>
		<e-popup :show="showPop" mode="center" round="20rpx">
			
			<view class="collect-box e-radius-20 bg-white e-p-20">
				<view class="e-flex-xy-center e-font-30 w-600 e-m-b-60">
					确定要领取吗？
				</view>
				<view class="e-flex-xy-center e-m-b-40 e-rela">
					<view class="tips-box e-flex" @tap.stop="showAgreementPop = true" >
						<view class="e-abso" style="width: 100rpx;height: 40rpx;z-index: 999;">
							
						</view>
						<radio style="transform:scale(0.8)" :checked="isAgree" :color="AppSkin.primary"  />
						<text>{{ $t('public.我已阅读并同意') }}《捡漏领取协议》</text>
					</view>
				</view>
				
				<view class="e-flex-xy-center">
					<view class="e-m-r-40 e-flex-xy-center cancle-btn" @tap="showPop = false">
						<text>取消</text>
					</view>
					<view class="e-flex-xy-center submit-btn" :style="{background:AppSkin.primary,opacity:isAgree?'1':'0.5'}" @tap="handleReceive">
						<text class="c-white">确定</text>
					</view>
				</view>
			</view>
		</e-popup>
		
		
		<agreement-pop :showPop="showAgreementPop" @close="showAgreementPop = false" @agree="isAgree = true" @cancel="isAgree = false" :isAgree="isAgree" agreeId="24"></agreement-pop>
	</view>
</template>

<script>
	import {rewardDetailList,pickReward} from '@/common/request/api'
	export default {
		data() {
			return {
				showLoad: false,
				pageNum: 1,
				isGet: true,
				list: [],
				showPop:false,
				isAgree:false,
				objJson:{},
				showAgreementPop:false
			}
		},
		onShow() {
			this.getData()
		},
		methods:{
			handleShow(item) {
				if (item.status === 3) {
					this.objJson=item
					this.showPop = true
				}
			},
			handleReceive() {
				this.showPop = false
				pickReward({id:this.objJson.id}).then(res => {
					if (res.code == 200) {
						this.$toastApp('领取成功')
						this.getData()
					}
				})
			},
			getData() {
				if (this.isGet && !this.showLoad) {
					let { pageNum } = this
					let data = {
						pageNum,
						pagesSize:15
					}
					this.showLoad = true
					rewardDetailList(data).then(res => {
						this.showLoad = false
						if (res.code == 200) {
							let loadRes = this.$pageLoad(this.list, res.data.rows, pageNum, 10)
							
							this.pageNum = loadRes.pageNo
							if (this.list.length == res.data.total) {
								this.isGet = false
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view-box {
		height: 100vh;
	}
	@include appBem_b(leaks) {
		@include appBem_e(item) {
			
		}
	}
	.collect-box {
		width: 80vw;
	}
	.cancle-btn {
		padding:10rpx 30rpx;
		border:1rpx solid #ccc;
		border-radius: 90rpx;
		width:200rpx;
		height:90rpx;
	}
	.submit-btn {
		width:200rpx;
		height:90rpx;
		border-radius: 90rpx;
	}
</style>